<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%--                     客服显示框                                                                 --%>

<style type="text/css">
.talk_con {
	width: 800px;
	height: 400px;
	border: 1px solid #666;
	background: #f9f9f9;
	font-size: 14px;
}

.talk_show {
	width: 790px;
	height: 304px;
	border: 1px solid #666;
	background: #fff;
	margin: 10px auto 0;
	overflow: auto;
}

.talk_input {
	width: 790px;
	margin: 0px auto 0px;
}

/* .whotalk {
	width: 60px;
	height: 30px;
	float: left;
	outline: none;
	margin-left: 20px;
} */

.talk_word {
	width: 700px;
	height: 75px;
	padding: 0px;
	float: left;
	outline: none;
	resize: none;
	border: 1px solid #666666;
}

.talk_sub {
	width: 90px;
	height: 75px;
	float: right;
}

.atalk {
	margin: 10px;
}

.atalk span {
	display: inline-block;
	background: #0181cc;
	border-radius: 10px;
	color: #fff;
	padding: 5px 10px;
}

.btalk {
	margin: 10px;
	text-align: right;
}

.btalk span {
	display: inline-block;
	background: #ef8201;
	border-radius: 10px;
	color: #fff;
	padding: 5px 10px;
}
</style>


<div class="talk_con" style="display: none;" id="customer">
	<div class="talk_show" id="words">
		<div class="atalk">
			admin<br>
			<span>1</span>
		</div>
		<div class="btalk">
			user<br>
			<span>2</span>
		</div>
		<div class="atalk">
			admin<br>
			<span>3</span>
		</div>
	</div>
	<div class="talk_input">
		<span style="display: none;" id="who">admin</span>
		<textarea class="talk_word" id="talkwords"></textarea>
		<input type="button" value="发送" class="talk_sub" id="talksub">
	</div>
</div>


<script type="text/javascript">
	function kf() {
		layer.open({
			type : 1,
			title : '我的客服',
			maxmin : false,
			shadeClose : true, 
			area : [ '801px', '' ],
			content : $('#customer')
		});
	}
	
	window.onload = function() {
		var Words = document.getElementById("words");
		var Who = document.getElementById("who");
		var TalkWords = document.getElementById("talkwords");
		var TalkSub = document.getElementById("talksub");

		TalkSub.onclick = function() {
			var str = "";
			if (TalkWords.value == "") {
				// 消息为空时弹窗
				TalkWords.setCustomValidity("消息不能为空");
				return;
			}
			
			str = '<div class="btalk">user<br><span>'+TalkWords.value+ '</span></div>';
			//将之前的内容与要发的内容拼接好 提交
			Words.innerHTML = Words.innerHTML + str;
			Words.scrollTop = Words.scrollHeight;
			
		}
	}
</script>